<template>
<div style="text-align: left" v-loading="loading">
<div style="margin-top:10px;">
<el-input
    prefix-icon="el-icon-search"
    placeholder="根据项目名称查找项目"
    size="mini"
    style="width: 300px;"
    v-model="keywords"
>
</el-input>
<el-button type="primary" size="mini" @click="loadNewTableData">查找</el-button>
<el-button type="primary" size="mini" @click="dialogVisible = true">新增</el-button>
</div>
<div id="show-list" style="margin-top: 10px">
<el-dialog title="项目变更"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose"
    @close="cancel"
    >
<el-form :model="editForm" label-width="80px" ref="editForm" v-loading="formLoading">
<el-form-item
    label="部门名称"
    prop="pDep"
    :rules="[
    { required: true, message: '部门名称不可为空', trigger: 'change'}
    ]"
    size="small"
>
<el-select v-model="editForm.pDep" style="width: 285px" placeholder="请选择部门名称" size="mini" >
<el-option
    v-for="item in deptidData"
    :key="item.id"
    :label="item.name"
    :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item
    label="用户名称"
    prop="pUser"
    :rules="[{ required: true, message: '用户名不可为空', trigger: 'change'}]"
    size="small"
>
<el-select v-model="editForm.pUser" style="width: 285px" placeholder="请选择用户名称" size="mini" >
<el-option
    v-for="item in diaData"
    :key="item.id"
    :label="item.username"
    :value="item.id">
</el-option>
</el-select>

</el-form-item>
<el-form-item
    label="项目名称"
    prop="proName"
    :rules="[
    { required: true, message: '项目名称不能为空', trigger: 'blur'}
    ]"
    size="small"
>
<el-input size="mini" v-model="editForm.proName" placeholder="请输入项目名称..."></el-input>
</el-form-item> 
<el-form-item
    label="项目编号"
    prop="proNum"
    :rules="[
    { required: true, message: '项目编号不能为空', trigger: 'blur'},

    ]"
    size="small"
>
<el-input type="proNum" v-model.number="editForm.proNum" placeholder="请输入项目编号..."></el-input>
</el-form-item> 
<div style="margin:90px;display:none;">
<el-form-item label="项目ID:">
          <el-input size="mini" style="width: 100px;" v-model="editForm.project_id" placeholder="将自动生成"></el-input>
        </el-form-item>
</div>
</el-form> 
<span slot="footer" class="dialog-footer">
    <el-button type="warning" @click="ResetDialog" style="width:90px;">重 置</el-button>
<el-button type="danger" @click="cancel" style="width:90px;">取 消</el-button>
<el-button type="primary" @click="addPro" style="width:90px;" v-if="!this.editForm.project_id!=''">确认新增</el-button>
<el-button type="primary" @click="handleEdit" style="width:90px;" v-if="this.editForm.project_id!=''">确认变更</el-button>

</span>
</el-dialog>
<el-table
:data="posData"
    ref="tables"
    size="mini"
    stripe
    border
    @selection-change="handleSelectionChange" 
    style="width: 97%">
<el-table-column
    type="selection"
    width="55"
    align="left">
</el-table-column>
<el-table-column
    prop="project_id"
    label="项目ID"
    width="120"
    align="center">
</el-table-column>
<el-table-column
    prop="project_name"
    label="项目名称"
    width="496"
    align="center">
</el-table-column>
<el-table-column
    prop="project_number"
    label="项目编号"
    width="120"
    align="center">
</el-table-column>
<!-- <el-table-column
    prop="user_id"
    label="用户ID"
    width="120"
    align="center">
</el-table-column>
<el-table-column
    prop="username"
    label="用户名称"
    width="120"
    align="center">
</el-table-column>
<el-table-column
    prop="department_id"
    width="120"
    label="部门ID"
    align="center">
</el-table-column> -->
<el-table-column
    prop="deptname"
    label="部门名称"
    width="120"
    align="center">
</el-table-column>
<el-table-column label="操作" align="center" width="200">
<template slot-scope="scope">
<el-button
    size="mini"
    icon="el-icon-edit"
    @click="prepareEdit(scope.row)"
    >编辑
</el-button>
<el-button
    size="mini"
    type="danger"
    icon="el-icon-delete"
@click="deletePro(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<el-pagination background
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[5, 10, 50, 100]"
    :page-size="pagesize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total.length">
</el-pagination>
<el-button type="danger" size="mini" v-if="posData.length>0" :disabled="multipleSelection.length==0"
@click="deleteMany">批量删除
</el-button>
</div>
</template>
<script>

export default{
    mounted: function () {
        this.loadTableData();
        this.loadDialogUserIdData();
        this.loadDialogDeptIdData(); 
    },
/* watch: {
keywords(val) {
this.$refs.table.filter(val);
}
}, */
data(){
    return {
        dialogVisible: false,
        posData: [],
        diaData:[],
        deptidData: [],
        keywords: '',
        total:'',
        currentPage:1,
        pagesize:5,
        multipleSelection: [],
        editForm:{
            pDep:'',
            pUser:'',
            proName:'',
            proNum:'',
            project_id:'',      
        },
        loading:false,
        formLoading:false,  
    }
},
methods: {
/* 表格数据 */
loadTableData(){
var _this = this;
this.loading = true;
this.postRequest("/project/manage").then(resp=> {
_this.loading = false;
if (resp && resp.status == 200) {
_this.total=resp.data;
_this.posData = resp.data.slice((_this.currentPage-1)*_this.pagesize,_this.currentPage*_this.pagesize);
}
})
},
/* append(data) {
this.form.parentName = data.label;
this.form.parentId = data.id;
this.nowNodeData = data;
this.form.id = '';
},
*/

handleSizeChange(data){
this.pagesize = data;
this.posData = this.total.slice((this.currentPage-1)*this.pagesize,this.currentPage*this.pagesize);
},
handleCurrentChange(data){
this.currentPage = data;
this.posData = this.total.slice((this.currentPage-1)*this.pagesize,this.currentPage*this.pagesize);
},
//翻页
handleSelectionChange(val) {
this.multipleSelection = val;
},

/* watch: {
dialogFormVisible(val){
!val&&setTimeout(() => {
this.$refs['editForm'].resetFields(); 
}, 0);
}
}, */
/* 多行删除 */
deleteMany(){
var _this = this;
this.$confirm('删除' + this.multipleSelection.length + '条数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
var multipleSelection = _this.multipleSelection;
var ids = '';
multipleSelection.forEach(row=> {
ids = ids + row.project_id + ',';
})
_this.doDelete(ids);
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
/* 获取用户ID相关 */
loadDialogUserIdData(){
var _this = this;
this.loading = true;
this.getRequest("/project/manage/dialog").then(resp=> {
_this.loading = false;
if (resp && resp.status == 200) {
_this.diaData = resp.data;
}
})
},
/* 获取部门相关 */
 loadDialogDeptIdData(){
        var _this = this;
        this.loading = true;
        this.getRequest("/project/manage/deptid").then(resp=> {
        _this.loading = false;
        if (resp && resp.status == 200) {
        _this.deptidData = resp.data;
        }
    })
},
/* 新增 */
addPro(){

var _this = this;
this.$refs['editForm'].validate((valid) => {
this.loading = true;
this.formLoading = true;
this.postRequest("/project/manage/pro", {
department_id: this.editForm.pDep,
user_id: this.editForm.pUser,
project_name :this.editForm.proName,
project_number :this.editForm.proNum
}).then(resp=> {
this.loading = false;
this.formLoading = false;
if (resp && resp.status == 200) {
var respData = resp.data;
//此行考虑变为添加成功是否继续添加 
/* this.$confirm('是否继续添加?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
_this.doDelete(row.project_id);
}).catch(() => {
this.$message({
type: 'info',
message: '已取消添加'
});
}); */
_this.$message({type: respData.status, message: "添加成功!"});
this.dialogVisible = false;
_this.loadTableData();
}else {
_this.$message( "添加失败!请查看必填项");
return false;
}
})
});
},
ResetDialog(){
this.editForm.pDep='';
this.editForm.pUser='';
this.editForm.proName='';
this.editForm.proNum='';
},
/* 查询后表格内容 */
loadNewTableData(){
if (!this.isNotNullORBlank(this.keywords)) {
this.$message.warning( '查询条件不能为空!');
return;
}
var _this = this;
this.loading = true;
this.postRequest("/project/manage/select", {
project_name: this.keywords

}).then(resp=> {
_this.loading = false;
if (resp && resp.status == 200) {
    _this.total=resp.data;
_this.posData = resp.data.slice((_this.currentPage-1)*_this.pagesize,_this.currentPage*_this.pagesize);

}
})
},
/* 取消关闭弹窗后 清空当前内容 */
cancel(){
this.$refs['editForm'].clearValidate(); // 重置验证
this.$refs['editForm'].resetFields(); 
this.dialogVisible = false;
this.editForm.pDep='',
this.editForm.pUser='',
this.editForm.proName='',
this.editForm.proNum='',
this.editForm.project_id=''
},
/* 获取编辑行相关 */
/* prepareEdit(index, row){
    this.dialogVisible = true;
    this.editForm = Object.assign({}, row);
    var _this = this;
    this.postRequest("/pro/getById",{
    project_id:row.project_id
    }).then(resp=>{
if(resp && resp.status == 200){
    var dialogEditData = resp.data;
    _this.editForm.pDep=dialogEditData[0].department_id,
    _this.editForm.pUser= dialogEditData[0].user_id,
    _this.editForm.proName=dialogEditData[0].project_name,
    _this.editForm.proNum=dialogEditData[0].project_number
   
}
})
}, */
 prepareEdit(data){
                  
                    this.dialogVisible=true;
                    this.editForm.pDep=data.department_id,
                    this.editForm.pUser= data.user_id,
            this.editForm.proName=data.project_name,
            this.editForm.proNum=data.project_number,
            this.editForm.project_id=data.project_id
            },
/* 编辑表格内容 */
handleEdit(){
var _this = this; 
this.$refs['editForm'].validate((valid) => {
this.dialogVisible = true;
this.loading = true;
this.postRequest("/project/manage/editpro", {
department_id: this.editForm.pDep,
user_id: this.editForm.pUser,
project_name :this.editForm.proName,
project_id :this.editForm.proNum,
rowid:this.editForm.project_id
}).then(resp=> {
this.loading = false;
if (resp && resp.status == 200) {
var respData = resp.data;
_this.$message({type: respData.status, message: "更新成功!"});
_this.loadTableData();
}else {
_this.$message( "编辑失败!请查看必填项");
return false;
}
}) 
});
}, 
/* 删除单行确认 */
deletePro(index, row){
var _this = this;
this.$confirm('删除[' + row.project_name + '], 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
_this.doDelete(row.project_id);
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
/* 删除单行并刷新当前页面数据 */
doDelete(ids){
var _this = this;
_this.loading = true;
var url = "/project/manage/del/";
this.deleteRequest(url + ids).then(resp=> {
_this.loading = false;
if (resp && resp.status == 200) {
this.$message({
type: 'info',
message: '成功删除'
});
_this.loadTableData();
}
})
},
/* 关闭弹窗 */
handleClose(done) {
this.$refs['editForm'].clearValidate(); // 重置验证
this.$refs['editForm'].resetFields(); 
this.dialogVisible = false;
this.editForm.pDep='',
this.editForm.pUser='',
this.editForm.proName='',
this.editForm.proNum='',
this.editForm.project_id=''
}
},
props: ['state']

}
</script>
